<template>
  <div class="max-div">
    <div style="display: flex;flex-direction: row;">
		<Upload
			multiple
			:headers="header"
			:show-upload-list="false"
			:before-upload="beforeUpload"
			accept=".xlsx, .xls"
			:on-success="onSuccess"
			:on-error="onError"
			action="https://admin.xuncd.cn/adminapi/file/uploadProExcel"
			>
			<Button type="primary" class="but">导入商品excel</Button>
		</Upload>
		<Upload
			multiple
			:headers="header"
			:show-upload-list="false"
			:before-upload="beforeUploadZip"
			accept=".zip"
			:on-success="onSuccess"
			:on-error="onError"
			action="https://admin.xuncd.cn/adminapi/file/uploadProImage"
			>
			<Button type="primary" class="but">导入主图压缩包</Button>
		</Upload>
		<Button type="primary" class="but">导入详情图</Button>
		<Button type="primary" class="but">验证数据</Button>
		<Button type="primary" class="but" @click="close">清除消息</Button>


      <div style="margin-top: 10px;"></div>
      <!-- <Upload
        multiple
        :headers="header"
        :show-upload-list="false"
        :before-upload="beforeUpload"
        accept=".xlsx, .xls"
        :on-success="onSuccess"
        :on-error="onError"
        type="drag"
        action="https://admin.xuncd.cn/adminapi/file/uploadProExcel"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>上传商品Excel</p>
        </div>
      </Upload> -->
    </div>

    <div style="margin-top: 10px;"></div>
    <div class="success" v-for="(item,index) in successList" :key="index">{{item}} 文件上传成功</div>

    <div style="margin-top: 10px;"></div>
    <div class="error" v-for="(item,index) in errorList" :key="index">{{item}}</div>
  </div>
</template>

<script>
import { getCookies } from '@/libs/util';

export default {
  data() {
    return {
      header: {},
      successList: [],
      errorList: [],
    };
  },

  mounted() {
    this.getToken();
  },

  methods: {
    close(){
      this.successList = []
      this.errorList = []
    },

    getToken() {
      this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
    },

    beforeUpload(file) {
	  //this.header['Content-Type']="";
      let date = new Date();
      let yy = date.getFullYear();
      let mm = date.getMonth() + 1;
      let dd = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      let ss = date.getSeconds();
      let time = yy + '-' + mm + '-' + dd + ' ' + h + ':' + min + ':' + ss;
      if (file.name.split('.')[1] != 'xlsx' && file.name.split('.')[1] != 'xls') {
        this.errorList.push(time + ' ' + file.name + ' 文件上传失败文件类型不正确');
        return false;
      }
    },
	beforeUploadZip(file) {
	  //this.header['Content-Type']="application/x-zip-compressed";
		
	  let date = new Date();
	  let yy = date.getFullYear();
	  let mm = date.getMonth() + 1;
	  let dd = date.getDate();
	  let h = date.getHours();
	  let min = date.getMinutes();
	  let ss = date.getSeconds();
	  let time = yy + '-' + mm + '-' + dd + ' ' + h + ':' + min + ':' + ss;
	  console.log("file:",file);
	  if (file.name.split('.')[1] != 'zip') {
	    this.errorList.push(time + ' ' + file.name + ' 文件上传失败文件类型不正确，必须为zip压缩包');
	    return false;
	  }
	},

    onSuccess(response, file, fileList) {
      let date = new Date();
      let yy = date.getFullYear();
      let mm = date.getMonth() + 1;
      let dd = date.getDate();
      let h = date.getHours();
      let min = date.getMinutes();
      let ss = date.getSeconds();
      let time = yy + '-' + mm + '-' + dd + ' ' + h + ':' + min + ':' + ss;
      if (response.status == 200) {
        this.$Message.success(response.msg);
        this.successList.push(time + ' ' + file.name+"  "+response.msg);
      } else {
        this.$Message.error(response.data.message);
        this.errorList.push(time + ' ' + file.name + ' ' + response.data.message);
      }
    },

    onError(error, file, fileList) {
      this.$Message.error(error);
    },
  },
};
</script>

<style scoped>
.max-div {
  padding: 20px;
  box-sizing: border-box;
}

.but {
  margin-right: 10px;
}

.success {
  color: #2d8cf0;
}

.error {
  color: red;
}
</style>